<script setup lang="ts">
import { childRouter, router } from "@/router"
import {onMounted, ref} from "vue"
let flag = ref(true)
let addindex = localStorage.getItem('idx')

let active = ref(Number(addindex)?Number(addindex):1)
let TOKEN:any = localStorage.getItem("token");
// onMounted(()=>{
//   if (TOKEN === "admin") {
//     flag.value = true
//     childRouter.forEach((item) => {
//       router.addRoute("Home", item);
//     });
//   } else {
//     router.addRoute("Home", childRouter[1]);
//     flag.value = false
//   }
//     router.push('/home/homePage')
// })
const tosrc = (url: any)=>{
    return new URL(url,import.meta.url).href
}
const changeindex = (index:number)=>{
  active.value = index
  localStorage.setItem('idx',index.toString())
}
const abc = ()=>{
  localStorage.clear()
  
}
</script>

<template>
  <div class="app">
    <div class="menu">
      <div class="login">
        <img src="@/assets/Icons/png/票务LOGO.png" alt="" />
      </div>
      <div v-for="(item,index) in childRouter" :key="index" v-if="flag" >
        <RouterLink :to="item.path" v-if="item.name" @click="changeindex(index)" >
          <img :src="tosrc(item.selectIcon)" alt="" v-if="index==active" />
          <img :src="tosrc(item.icon)" alt="" v-else >
          <span class="title">
            {{ item.name }}
          </span>
        </RouterLink>
      </div>
      <div v-else>
        <RouterLink :to="childRouter[1].path">
          <img src="@/assets/Icons/png/首页2.png" alt="" />
          {{ childRouter[1].name }}
        </RouterLink>
      </div>
    </div>
    <div style="flex-grow: 1;background-color: #EAEBED;">
      <header>
            <span style="float: right;">
                当前登录 <a href="" @click="abc" style="color: aqua;">{{ TOKEN }} </a>  <img  src="@/assets/Icons/png/Image/User.png" alt="" style="width: 30px;height: 30px;" >
            </span>
        </header>
      <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  display: flex;
}
.menu {
  width: 200px;
  border-right: 1px solid #ccc;
}
.menu a {
  display: block;
  width: 200px;
  height: 58px;
  background-color: rgba(43, 52, 69, 0);
  line-height: 58px;
  color: #303849;
  text-decoration: none;
}
.login {
  width: 119px;
  height: 30px;
  margin: 24px 49px 25px 32px;
}
.login img {
  width: 100%;
  height: 100%;
}
.router-link-active {
  /* background: red !important; */
   color: #1ba9ba!important;
}
.router-link-active .title{
  border-right: #1ba9ba solid 4px;
  color: #1ba9ba!important;
}
.title{
  
  width: 116px;
	font-family: SourceHanSansCN-Medium;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 13px;
	letter-spacing: 0px;
	color: #303849;
  display: inline-block;
  padding: 9px 0px;
  position: relative;
  top: -7px;
}
.menu a img {
  width: 23px;
  margin-left: 34px;
  margin-top: 18px;
  margin-right: 23px;
}
header{
    width: 100%;
    padding-right: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
}
</style>
